<template>
  <m-page>
    <!-- 还款申请页 -->
    <m-header title="还款申请"></m-header>

    <div class="repayment_apply">
      <div class="repayment_apply_header">
        <div class="repayment_apply_item">
          <p>借据编号</p>
          <span class="item_spn1">12200001</span>
        </div>
        <div class="repayment_apply_item">
          <p>借款金额</p>
          <ynet-amount :value="100000" has-separator :precision="2" />
          <span class="item_spn2">元</span>
        </div>
        <div class="repayment_apply_item item_bottom">
          <p>剩余本金</p>
          <ynet-amount :value="90000" has-separator :precision="2" />
          <span class="item_spn2">元</span>
        </div>
      </div>

      <div class="repayment_apply_emptybox"></div>

      <div class="repayment_apply_content">
        <md-input-item ref="input0" title="还款本金" placeholder="请输入还款金额" is-amount>
          <span class="inputitem_right" slot="right">部分还款</span>
        </md-input-item>
        
        <div class="repayment_apply_spreadsheet">
          <div class="spreadsheet_item1">
            <p>归还金额</p>
            <span v-if="this.isAmountShow == '1'">请试算</span>
            <ynet-amount :value="spreadsheetData.amount" has-separator :precision="2" v-if="this.isAmountShow == '2'"/>
          </div>
          <div class="spreadsheet_item2">
            <p>归还利息</p>
            <span v-if="this.isAmountShow == '1'">请试算</span>
            <ynet-amount :value="spreadsheetData.interest" has-separator :precision="2" v-if="this.isAmountShow == '2'"/>
          </div>
          <span class="spreadsheet_btn" @click="spreadsheet()">试算</span>
        </div>

        <div class="repayment_apply_account">
          <p>还款账户</p>
          <img src="" alt="">
          <span>长沙银行 储蓄卡（8888）</span>
        </div>
      </div>
    </div>

    <ynet-button type="warning" @click="handClick('bottom')">立即还款</ynet-button>
    <!-- 点击立即还款 弹出 请输入取款密码 -->
    <ynet-popup v-model="isPopupShow.bottom" position="bottom">
        <ynet-popup-title-bar title="请输入银行卡取款密码"></ynet-popup-title-bar>
        <div class="md-example-popup md-example-popup-bottom">
          <div class="password_checked">
            <div class="password_checked_text">长湘贷贷还款</div>
            <span class="sp1">￥</span> 
            <ynet-amount :value="1000" has-separator :precision="2" />
            <div class="password_checked_content">
              <img src alt />
              <div class="checked_content_card">
                <span>长行借记卡 （尾号：8737）</span>
                <p>可用余额：
                  <ynet-amount :value="1234.56" has-separator :precision="2" />元
                </p>
              </div>            
            </div>
            <md-codebox :maxlength="6" v-model="password" system />
            <ynet-number-keyboard
              type="simple"
              v-model="isKeyBoardShow"
              @enter="onNumberEnter1"
              @delete="onNumberDelete1"
              @hide="onNumberHide1"
            ></ynet-number-keyboard>
          </div>
        </div>
      </ynet-popup>
  </m-page>
</template>

<script>
import { PopupTitleBar ,Button ,NumberKeyboard ,Amount ,Popup} from "ynet-mobile";
import { InputItem ,Codebox} from "mand-mobile";
export default {
  components: {
    [Amount.name]:Amount,
    [Button.name]:Button,
    [InputItem.name]: InputItem,
    [PopupTitleBar.name]: PopupTitleBar,
    [Popup.name]:Popup,
    [NumberKeyboard.name]:NumberKeyboard,
    [Codebox.name]: Codebox,
  },
  data() {
    return {
      isAmountShow:"1", //1 为显示请试算 2 为显示试算金额
      spreadsheetData:{
        amount:0,
        interest:0,
      },
      isPopupShow: {},
      isKeyBoardShow:true,
      password:''
    };
  },
  created() {},
  methods:{
    //立即还款按钮
    handClick(type){
      this.$set(this.isPopupShow, type, true);
    },
    //试算按钮
    spreadsheet(){
      this.isAmountShow = '2'
      this.spreadsheetData.amount = 90000
      this.spreadsheetData.interest = 1000
    },

    onNumberEnter1(val) {
      this.password += val;
    },
    onNumberDelete1() {
      if (this.password === "") {
        return;
      }
      this.password = this.password.substr(0, this.password.length - 1);
    },
    onNumberHide1() {
      this.password = "";
    },
  },
  mounted() {},
  watch: {},
  computed: {}
};
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>

